/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,82,217,0.5);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb:hover {
  border-radius: 10px;
  background: rgba(0,82,217,1);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.tw-exhibition {
  position: relative;
  width: 1920px;
  height: 1080px;
  
  overflow: hidden;
}
.m-school-map {
  // background-color: #031532 !important;
  width: 1000px;
  height: 540px;
  margin-left: 80px;
  div {
    // background-color: #031532 !important;
  }
}

.tw-exhibition-weather {
  text-align: right;
  color: #00c6ff;
  padding-right: 150px;
  font-size: 18px;
  margin-top: -42px;
  &.xindex {
    padding-top: 18px;
    margin-top: 0;
  }
}

.tw-exhibition-header{
  width: 100%;
  height: 60px;
  margin-top: 20px;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
  &__hero{
    // width: 80%;
    height: 60px;
    background: url("~@assets/images/titlebkg.png") center no-repeat;
    // background-size: cover;
    background-position-y: 0px;
    // margin: 0 15%;
    @media screen and (max-width: 1024px){
      margin: 0;
    }
    h1{
      position: relative;
      min-height: 40px;
      line-height: 40px;
      display: inline-block;
      font-size: 30px;
      font-weight: bold;
      color: #00a5fe;
      z-index: 1;
      &[data-text]::after {
        content: attr(data-text);
        color: rgba(0, 219, 255, 1);
        position: absolute;
        left: 0;
        z-index: 2;
        width: 100%;
        // -webkit-mask-image: -webkit-gradient(linear, 0 0, right 0, from(#07ffff), to(rgba(0,0,255,0)));
      }
      @media screen and (max-width: 1600px){
        //min-height: 60px;
        //line-height: 60px;
        font-size: 20px;
      }
    }
  }
}

.tw-exhibition-index {
  position: relative;
  margin: 0;
  width: 100%;
  height: 1080px;
  background: url('~@assets/images/indexbkg.png') no-repeat center bottom;

  .m-pic-index {
    position: absolute;
    top: 150px;
    left: 100px;
  
    &.xmoon {
      animation: yun-move-left 6s infinite;
      animation-direction:alternate;
      animation-timing-function: ease-in-out;
      animation-delay: 1.5s;
    }
    &.xyunleft {
      animation: yun-move-right 6s infinite;
      animation-direction:alternate;
      animation-timing-function: ease-in-out;
      animation-delay: 1s;
    }
    &.xyunright {
      animation: yun-move-left 6s infinite;
      animation-direction: normal;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
    }
  }

  .m-qipao {
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 20px;
    // left: 1000px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid #4a9cff;
    border-radius: 50%;
    box-shadow: inset 0px 0px 10px 1px #4a9cff; 
    animation: qipao-move-beam 6s infinite;
    animation-timing-function: ease;
    animation-delay: 0s;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay:0s;
    div {
      font-size: 16px;
      color: #80c6ff;
      width:80px;
    }
  }

  .m-qiuti {
    position: absolute;
    display: flex;
    text-align: center;
    align-items: center;
    font-weight: 700;
    justify-content: center;
    overflow: hidden;
    animation: scale-beam 3s infinite;
    animation-direction:alternate;
    animation-timing-function: ease-in-out;
    &.xa {
      top: 320px;
      right: 870px;
      margin: 10px;
      width: 116px;
      height: 116px;
      border-radius: 58px;
      background-image: radial-gradient(circle 99px at center top, #99ccff, #243bbb);
      animation-delay: 0s;
    }
    &.xb {
      top: 220px;
      right: 660px;
      margin: 10px;
      width: 166px;
      height: 166px;
      border-radius: 84px;
      background-image: radial-gradient(circle 140px at center top, #00e2fb, #0075eb);
      animation-delay: 0.5s;
    }
    &.xc {
      top: 350px;
      right: 520px;
      margin: 10px;
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background-image: radial-gradient(circle 80px at center top, #00e0e0, #007d7f);
      animation-delay: 1s;
    }
    &.xd {
      top: 180px;
      right: 480px;
      margin: 10px;
      width: 96px;
      height: 96px;
      border-radius: 48px;
      background-image: radial-gradient(circle 40px at center top, #00a6eb, #002daa);
      animation-delay: 1.5s;
    }
    &.xe {
      top: 250px;
      right: 370px;
      margin: 10px;
      width: 116px;
      height: 116px;
      border-radius: 58px;
      background-image: radial-gradient(circle 99px at center top, #94d4f1, #2559be);
      animation-delay: 2s;
    }
    &.xf {
      top: 250px;
      right: 150px;
      margin: 10px;
      width: 156px;
      height: 156px;
      border-radius: 78px;
      background-image: radial-gradient(circle 130px at center top, #00a6eb, #002ba9);
      animation-delay: 2.5s;
    }
    &.xg {
      top: 298px;
      right: 580px;
      margin: 10px;
      width: 96px;
      height: 96px;
      border-radius: 48px;
      background-image: radial-gradient(circle 40px at center top, #0074d1, #004fa9);
      animation-delay: 1s;
    }
    &.xh {
      top: 370px;
      right: 130px;
      margin: 10px;
      width: 66px;
      height: 66px;
      border-radius: 33px;
      background-image: radial-gradient(circle 25px at center top, #d2ecff, #5ab0ff);
      animation-timing-function: ease-in-out;
      animation-delay: 1s;
    }
    .xtitle1 {
      font-size: 20px;
      color: #fff;
      width: 50px;
    }
    .xtitle2 {
      font-size: 20px;
      color: #fff;
      width: 90px;
    }
  }

  // animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  // animation-delay: 1.4s;

  .m-chart-index {
    position: absolute;
    top: 400px;
    left: 630px;
    z-index: 10;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }

  .m-indexitem {
    cursor: pointer;
    width: 160px;
    position: absolute;
    border-radius: 40px;
    overflow: hidden;
    z-index: 9;
    &.xstudent {
      height: 35px;
      top: 175px;
      left: 572px;
    }
    &.xteacher {
      height: 36px;
      top: 250px;
      left: 634px;
    }
    &.xschool {
      height: 35px;
      top: 330px;
      left: 660px;
    }
    .xmenutitle {
      color: #fff;
      height: 34px;
      line-height: 34px;
      padding-left: 10px;
      font-size: 16px;
      span {
        font-size: 20px;
      }
    }
  }

  .m-pic-bird {
    position: absolute;
    top: 250px;
    left: 280px;
    animation: bird-move-beam 4s infinite;
    animation-timing-function: ease;
    animation-delay: 0s;
  }
  .m-pic-light {
    position: absolute;
    bottom: 0;
    &.xlight1 {
      animation: light-move-beam 3s infinite;
      animation-timing-function: ease;
      animation-delay: 0s;
    }
    &.xlight2 {
      animation: light-move-beam 3s infinite;
      animation-timing-function: ease;
      animation-delay: 1s;
    }
    &.xlight3 {
      animation: light-move-beam 3s infinite;
      animation-timing-function: ease;
      animation-delay: 2s;
    }
  }


  .m-indexitem:hover .m-alight {
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 45px;
    background-color: transparent; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, rgba(255,255,255,0.8) , rgba(255,255,255,0));
    animation: alight-move 4s infinite;
    animation-timing-function: ease;
  }

}

.tw-exhibition-student {
  position: relative;
  background: url("~@assets/images/studentbkg.png") center no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  background-position-y: 0px;
  background-position-x: 0px;
  width: 100%;
  height: 1080px;
  &-body {
    display: flex;
    width: 100%;
    padding: 40px;
    color: #fff;
  }

.m-menu-student {
  position: absolute;
  top: 260px;
  left: 0px;
}

.m-menu-pic-yuan1 {
  position: absolute;
  top: 295px;
  left: -185px;
  animation: rotateForPic1 4s linear infinite;
}
.m-menu-pic-yuan2 {
  position: absolute;
  top: 282px;
  left: -200px;
  animation: rotateForPic2 4s linear infinite;
}

.m-middle-student {
  position: absolute;
  top: 280px;
  left: 680px;
  width: 500px;
}
.m-right-student {
  position: absolute;
  top: 100px;
  right: 80px;
  width: 550px;
}
.m-menu-pic-s {
  position: absolute;
  top: 260px;
  left: 0px;
}

.m-menu-pic-ico {
  position: absolute;
  cursor: pointer;
  font-size: 18px;
  &.xico0 {
    top: 303px;
    left: 190px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico1 {
    top: 353px;
    left: 230px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico2 {
    top: 403px;
    left: 250px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico3 {
    top: 453px;
    left: 260px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico4 {
    top: 503px;
    left: 260px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico5 {
    top: 553px;
    left: 250px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico6 {
    top: 603px;
    left: 220px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  &.xico7 {
    top: 653px;
    left: 190px;
    padding-left: 20px;
    width: 310px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  span {
    padding-left: 30px;
    line-height: 30px;
  }
}

.m-stulight-outer {
  position: absolute;
  top: 51px;
  left: -169px;
  width: 374px;
  height: 374px;
  border-radius: 50%;
  overflow: hidden;
}
.m-stulight-middle {
  position: relative;
}
.m-stulight {
  position: absolute;
  left: 0;
  top: 0;
  height: 65px;
  width: 378px;
  background-color: transparent; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to bottom, rgba(0,226,254,0.8) , rgba(0,226,254,0));
  animation: stulight-move 5s infinite;
  animation-timing-function: ease;
}

.m-stulight-menu-outer {
  position: absolute;
  width: 310px;
  height: 40px;
  overflow: hidden;
  &.xico0 {
    position: absolute;
    top: 43px;
    left: 190px;
  }
  &.xico1 {
    position: absolute;
    top: 93px;
    left: 225px;
  }
  &.xico2 {
    position: absolute;
    top: 143px;
    left: 245px;
  }
  &.xico3 {
    position: absolute;
    top: 193px;
    left: 255px;
  }
  &.xico4 {
    position: absolute;
    top: 243px;
    left: 255px;
  }
  &.xico5 {
    position: absolute;
    top: 293px;
    left: 245px;
  }
  &.xico6 {
    position: absolute;
    top: 343px;
    left: 225px;
  }
  &.xico7 {
    position: absolute;
    top: 393px;
    left: 190px;
  }
}
.m-stulight-menu-middle {
  position: relative;
}
.m-stulight-menu {
  position: absolute;
  left: 30px;
  top: 0;
  height: 45px;
  width: 45px;
  background-color: transparent; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, rgba(255,255,255,0.8) , rgba(255,255,255,0));
  animation: stulight-move-menu 3s infinite;
  animation-timing-function: ease;
}

}

.tw-exhibition-teacher {
  position: relative;
  background: url("~@assets/images/teacherbkg.png") center no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  background-position-y: 0px;
  background-position-x: 0px;
  width: 100%;
  height: 1080px;
  &-body {
    display: flex;
    width: 100%;
    padding: 40px;
    // padding-top: 100px;
    color: #fff;
    // justify-content: space-around;
  }
  &-item {
    position: absolute;
   
    &.xitem1 {
      width: 350px;
      left: 100px;
    }
    &.xitem2 {
      width: 250px;
      top: 290px;
      left: 480px;
    }
    &.xitem3 {
      // margin-left: 0px;
      top: 300px;
      left: 740px;
    }
    &.xitem4 {
      width: 250px;
      top: 290px;
      right: 480px;
    }
    &.xitem5 {
      width: 350px;
      right: 100px;
    }
    .xtitle {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
  }

.m-teacher-pic-yuan3 {
  position: absolute;
  top: 100px;
  left: 100px;
  animation: rotateForPic1 4s linear infinite;
}
.m-teacher-pic-yuan4 {
  position: absolute;
  top: 117px;
  left: 116px;
  animation: rotateForPic2 4s linear infinite;
}
.m-teacher-menu-item {
  position:absolute;
  cursor:pointer;
  text-align:center;
  .xname {
    font-size: 18px;
  }
  .xnum {
    font-size: 16px;
  }
  &.xmenu1 {
    top:250px;left:30px;
  }
  &.xmenu2 {
    top:125px;left:25px;
  }
  &.xmenu3 {
    top:25px;left:125px;
  }
  &.xmenu4 {
    top:25px;left:250px;
  }
  &.xmenu5 {
    top:125px;left:350px;
  }
  &.xmenu6 {
    top:250px;left:345px;
  }
  // &.xmenu7 {
  //   top:240px;left:345px;
  // }
}
.m-teacher-menu1 {
  position: absolute;
  top: 0;
  left: 0px;
  width: 430px;
  height: 344px;
  background: transparent;// url('~@assets/images/menu-t1.png')
}

.m-tealight-outer {
  position: absolute;
  top: 128px;
  left: 126px;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  overflow: hidden;
}
.m-tealight-middle {
  position: relative;
}
.m-tealight {
  position: absolute;
  left: 0;
  top: 0;
  height: 65px;
  width: 178px;
  background-color: transparent; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to bottom, rgba(0,226,254,0.8) , rgba(0,226,254,0));
  animation: tealight-move 5s infinite;
  animation-timing-function: ease;
}

.m-progress-data {
  // display: flex;
  margin: 0 20px;
  .xtitle {
    white-space: nowrap;
  }
  // justify-content: space-around;
}
.m-progress-data-item {
  width: 80px;
  text-align: center;
  font-size: 14px;
  color: #bad3ff;
}

}

.tw-exhibition-school {
  position: relative;
  .m-school-mobile {
    position: absolute;
    width: 610px;
    height: 900px;
    top: 50px;
    right: 50px;
    background: url('~@assets/images/schoolbkg.png') no-repeat center;
    padding: 0 5px;
    .xtitle {
      font-size: 24px;
      color:#fff;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  }
  .m-school-mobile-body {
    width: 600px;
    height: 840px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .m-top-title {
    margin-left: 40px;
    width: 50%;
    span {
      padding-left: 20px;
    }
  }
  .m-pic-schooldetail {
    position: relative;
    margin-bottom: 20px;
    width: 600px;
    height: 360px;
    // background: url('~@assets/images/line.png') no-repeat center;
    
    .xpic-one {
      position: absolute;
      top: 0;
      left: 0;
      // opacity: 0;
      // animation: move-one 0.6s;
      // animation-timing-function: ease;
      // animation-delay: 0s;
      // animation-fill-mode: forwards;
    }
    .xpic-two {
      position: absolute;
      top: 0;
      left: 0;
      // opacity: 0;
      // animation: move-one 0.6s;
      // animation-timing-function: ease;
      // animation-delay: 0.6s;
      // animation-fill-mode: forwards;
    }
    .xpic-light {
      position: absolute;
      top: 0;
      left: 0;
      // opacity: 0;
      // animation: move-two 1s;
      // animation-timing-function: ease;
      // animation-delay: 1.2s;
      // animation-fill-mode: forwards;
    }
    .xcontent {
      color: #fff;
      // opacity: 0;
      // animation: move-two 1s;
      // animation-timing-function: ease;
      // animation-delay: 1.2s;
      // animation-fill-mode: forwards;
      font-size: 16px;
      .xtitle {}
      .xtotal {
        border-bottom: 1px solid #bad3ff55;
      }
      .xavg {
        color: #bad3ff;
      }
    }
     
    .anim.xpic-one {
      opacity: 0;
      animation: move-one 0.3s;
      animation-timing-function: ease;
      animation-delay: 0s;
      animation-fill-mode: forwards;
    }
    .anim.xpic-two {
      opacity: 0;
      animation: move-one 0.3s;
      animation-timing-function: ease;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    .anim.xpic-light {
      opacity: 0;
      animation: move-two 1.2s;
      animation-timing-function: ease;
      animation-delay: 0s;
      animation-fill-mode: forwards;
    }
    .anim.xcontent {
      opacity: 0;
      animation: move-two 1.2s;
      animation-timing-function: ease;
      animation-delay: 0s;
      animation-fill-mode: forwards;
    }
    
    .xcontent.xone {
      position: absolute;
      top: 10px;
      left: 220px;
      text-align: center;
    }
    .xcontent.xtwo {
      position: absolute;
      top: 91px;
      left: 50px;
      min-width: 137px;
      text-align: left;
    }
    .xcontent.xthree {
      position: absolute;
      top: 95px;
      right: 50px;
      min-width: 127px;
      text-align: right;
    }
    .xcontent.xfour {
      position: absolute;
      top: 175px;
      left: 25px;
      min-width: 112px;
      text-align: left;
    }
    .xcontent.xfive {
      position: absolute;
      top: 177px;
      right: 30px;
      min-width: 98px;
      text-align: right;
    }
    .xcontent.xsix {
      position: absolute;
      top: 274px;
      left: 50px;
      min-width: 129px;
      text-align: left;
    }
    .xcontent.xseven {
      position: absolute;
      top: 269px;
      right: 50px;
      min-width: 125px;
      text-align: right;
    }
  }
  
  .m-colorline {
    position: absolute;
    height: 2px;
    width: 540px;
    top: 20px;
    background-image: linear-gradient(to left, rgb(36,138,254), rgb(137,107,253));
  }

  .m-phone-button {
    width:100%;color:#fff;display:flex;justify-content:center;position:relative;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  
  }

  .m-title-outerbutton {
    z-index: 1;
    height: 44px;
    text-align: center;
    padding: 2px;
    width:fit-content;
    font-size: 14px;
    border-radius: 44px;
    background-image: linear-gradient(to left, rgb(36,138,254), rgb(137,107,253));
  }
  .m-title-middlebutton {
    border-radius: 40px;
    background-color: rgb(3, 21, 50);
  }
  .m-title-innerbutton {
    height: 40px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    padding: 0px 30px;
    font-size: 22px;
    border-radius: 40px;
    background-image: linear-gradient(to left, rgb(36,138,254, 0.3), rgb(137,107,253, 0.3));
  }
  .m-back-index {
    position: absolute;
    cursor: pointer;
    left: 0;
    bottom: 70px;
  }
  
  @keyframes move-one {
    0% {
      opacity: 0;
      top: -20px;
    }
    100% {
      opacity: 1;
      top: 0;
    }
  }
  
  @keyframes move-two {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

@keyframes radar-beam {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes scale-beam {
  0% {
    left: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes qipao-move-beam {
  0% {
    opacity: 0;
    bottom: 0px;
  }
  50% {
    opacity: 1;
    bottom: 100px;
  }
  100% {
    opacity: 0;
    bottom: 200px;
  }
}

@keyframes light-move-beam {
  0% {
    opacity: 0;
    bottom: -120px;
  }
  50% {
    opacity: 1;
    bottom: 80px;
  }
  100% {
    opacity: 0;
    bottom: 80px;
  }
}

@keyframes yun-move-left {
  0% {
    left: 100px;
    opacity: 0.6;
  }
  33% {
    opacity: 1;
    left: 70px;
  }
  // 50% {
  //   left: 70px;
  // }
  67% {
    opacity: 1;
    left: 70px;
  }
  100% {
    opacity: 0.6;
    left: 100px;
  }
}
@keyframes yun-move-right {
  0% {
    left: 100px;
    opacity: 0.6;
  }
  33% {
    opacity: 1;
    left: 90px;
  }
  // 50% {
  //   left: 90px;
  // }
  67% {
    opacity: 1;
    left: 90px;
  }
  100% {
    opacity: 0.6;
    left: 100px;
  }
}

@keyframes bird-move-beam {
  0% {
    opacity: 0;
    left: 280px;
    top: 250px;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 150px;
    top: 150px;
  }
}



@keyframes alight-move {
  0% {
    left: -50px;
  }
  100% {
    left: 200px;
  }
}

@keyframes rotateForPic1 {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(0);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(-180deg);
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(-360deg);
  }
}

@keyframes rotateForPic2 {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(0);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(180deg);
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(360deg);
  }
}

@keyframes stulight-move {
  0% {
    top: -50px;
  }
  100% {
    top: 400px;
  }
}


@keyframes stulight-move-menu {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 290px;
  }
}

@keyframes tealight-move {
  0% {
    top: -50px;
  }
  100% {
    top: 200px;
  }
}
